@import '../../App.css';

@keyframes enter-stage{
    0%{
        transform: translate(500%,300%);
        opacity: 0;
    }
    40%{
        transform: translate(0,0);
        opacity: .8;
    }
    50%,70%,90%{
        transform: scale(1.5);
    }
    60%,80%,100%{
        transform: scale(1);
    }
}

.free-shape {
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 2px;
    animation: enter-stage 3s ease-in-out;
    opacity: .8;
    color: dodgerblue;
}

.shape-circle{
    border-radius: 50%;
}

.shape-triangle{
    clip-path: polygon(50% 0,0 100%,100% 100%);
}

.shape-line{
    --clip-width:calc(50%-1px);
    clip-path: inset(48% 0 48% 0);
}

.free-shape+div{
    cursor: move;
    transition: opacity ease-in-out .6s;
    border:1px dotted rgba(30,90,233,0.5);
    opacity: 0;
}

.free-shape+div > svg{
    cursor: grabbing;
    opacity: 1;
}

.free-shape+div:hover{
    opacity: 1;
}